<template>
  <a-card title="高德地图">
    <div id="mapBox"></div>
  </a-card>
</template>
<script>
import MapLod from '@/utils/MapLod'

export default {
  data () {
    return {}
  },
  mounted () {
    this.initMap()
  },
  methods: {
    // 初始化地图
    initMap () {
      MapLod().then(AMap => {
        const zmap = new AMap.Map('mapBox', {
          resizeEnable: true,
          expandZoomRange: true,
          rotateEnable: true,
          pitchEnable: true,
          viewMode: '3D',
          pitch: 0,
          rotation: 0,
          zoom: 17,
          zooms: [1, 20]
        })
        // 地图类别切换控件
        zmap.addControl(new AMap.MapType({
          defaultType: 0, // 0代表默认，1代表卫星
          showRoad: true // 显示路况（右上角也可点击）
        }))
        // 工具条控件
        zmap.addControl(new AMap.ToolBar({
          position: 'RB'
        }))
        // 比例尺控件
        zmap.addControl(new AMap.Scale())
        zmap.addControl(new AMap.ControlBar({
          showZoomBar: false,
          position: {
            right: '75px',
            top: '8px'
          }
        }))
      })
    }
  }
}
</script>

<style lang="less" scoped>
  #mapBox {
    height: 70vh;
  }
</style>
